import React, { Component } from 'react'
import Header from './components/Header'
import Main from './components/Main'
import Footer from './components/Footer'
import axios from './utils/axios'

export class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      list: []
    }
  }
  componentDidMount() { 
    axios.get('/list').then((res) => {
      console.log('res', res);
      this.setState({
        list: res.data
      })
    })
  }
  addFn(value) {
    let { list } = this.state
    list.push({ 
      id: new Date().getTime(),
      title: value,
      state: false
    })

    this.setState({
      list: list
    })
  }

  removeFn(id) {
    let { list } = this.state
    list = list.filter((item) => {
      return item.id !== id
    })
    this.setState({
      list: list
    })
  }

  changeState(id) {
    let { list } = this.state
    list.forEach((item) => {
      if (item.id === id) {
        item.state = !item.state
      }
    })
    console.log('list', list);
    this.setState({
      list: list
    })
  }
  render() {
    const { list } = this.state
    return (
      <div className='App'>
        <Header></Header>
        <Main
          list={list}
          add={this.addFn.bind(this)}
          remove={this.removeFn.bind(this)}
          changeState={this.changeState.bind(this)}
        ></Main>
        <Footer list={list}></Footer>
      </div>
    )
  }
}

export default App